<template>
	<m-layout2 title="邀請好友" barBg="unset" color="#ffffff">
		<view class="qrcode flex-column ai-center jc-space-around" style="height: 100%">
			<view class="qrcode-box mt-200">
				<u-qrcode ref="qrcode" size="100" canvas-id="qrcode" :value="shareUrl" />
			</view>
			<view class="flex-column ai-center pl-24 textBox">
				<view class="flex" style="color: #fff">
					<text class="fs24">邀請碼：</text>
					<view class="" @click="doCopy(userinfo.invcode)">
						<text class="fs32">{{ userinfo.invcode }}</text>
						<m-icon size="32" spa="0 0 0 10" color="#FFF" type="icon-fuzhi"></m-icon>
					</view>
				</view>
				<m-button class="m-button" value="2222" @click="doCopy(userinfo.invcode)">
					<text>複製邀請碼</text>
				</m-button>
			</view>
		</view>
	</m-layout2>
</template>

<script>
import { invUrl } from '@/common/baseconfig.js';
import { mapState } from 'vuex';
export default {
	data() {
		return {};
	},
	computed: {
		...mapState({
			userinfo: (state) => state.user.userinfo
		}),
		shareUrl() {
			return invUrl + 'pages/login/register/register?invcode=' + this.userinfo.invcode;
		}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
	background: url('../../../static/images/pages/mine/share/sharebg.png') no-repeat;
	background-size: 100% 100%;
	background-color: #ffd100;
	padding: 0rpx 8rpx;
	box-sizing: border-box;
}

.qrcode {
	width: 100%;
	.qrcode-box {
		display: inline-block;
		background: linear-gradient(128deg, #ffffff, #ffffff);
		border-radius: 6rpx;
		padding: 16rpx;
	}
	.textBox {
		width: 100%;
		text-align: center;
	}
}

.main {
	box-sizing: border-box;
	width: 100%;
	.h1 {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ad2011;
	}

	.h2 {
		padding: 20rpx 0;
		font-size: 45rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #ad2011;
	}

	.btn-box {
		text-align: center;
	}
}
.m-button {
	margin-top: 40rpx;
	width: 600rpx;
	height: 83rpx;
	padding: 0;
	background-color: #ffd100;
	// background: url('../../../static/images/pages/mine/share/share-btn.png') no-repeat;
	background-size: 100% 100%;
	border: unset !important;
}
</style>
